<template>
  <el-dialog :close-on-click-modal="false"
             append-to-body
             :title="title2"
             :visible.sync="visible"
             @close="cancel"
             :show="show"
             width="700px">
    <el-table :data="sitetable"
              style="width: 100%;margin-bottom: 20px">
      <el-table-column label="编号"
                       width="180">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="包名称"
                       width="180">
        <template slot-scope="scope">{{ scope.row.bagname }}</template>
      </el-table-column>
      <el-table-column label="状态"
                       width="180">
        <template slot-scope="scope">{{ scope.row.showflag|setShowflag }}</template>
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="100">
        <template slot-scope="scope">
          <el-button type="text"
                     size="small"
                     @click="handleDelete(scope.row)">删除</el-button>
          <!-- <el-button type="text" size="small" @click="addPackage({title:'修改',row:scope.row})">修改</el-button> -->
          <el-button type="text"
                     size="small"
                     @click="modifyPackage(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="addmanage"
         @click="addPackage({title:'添加'})">
      <el-button type="text"
                 size="small">+ 添加</el-button>
      <addPackageDialog :params="$attrs"
                        :show.sync="show2"
                        @getNewPData="getNewPData"
                        :options='options'>
      </addPackageDialog>
      <modifyPackageDialog :show.sync="modifyShow"
                           :userBagId="userBagId"></modifyPackageDialog>
    </div>
    <span slot="footer"
          class="dialog-footer">
      <el-button type="primary"
                 @click="addtag">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import addPackageDialog from './addPackageDialog'
import modifyPackageDialog from './modifyPackageDialog'
export default {
  name: 'sitePackageDialog',
  inheritAttrs: false,
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title2: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: this.show,
      show2: false,
      options: {},
      sitetable: [],
      id: '',
      modifyShow: false,
      userBagId: 0
    }
  },
  methods: {
    addPackage (data) {
      this.options = data
      this.show2 = true
    },
    addtag () {
      this.$emit('update:show', false)
      this.$emit('reloadData')
    },
    // 删除包管理中的数据
    handleDelete (row) {
      let that = this
      this.$confirm('提示', {
        title: '提示',
        message: '你确定要删除这行内容吗？',
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(res => {
          if (res === 'confirm') {
            that.$axios
              .get(
                '/userBag/deleteUserBag?userId=' +
                that.id +
                '&userBagId=' +
                row.id
              )
              .then(res => {
                if (res.status === 200) {
                  if (res.data.message === '操作成功') {
                    that.getsitetable()
                  }
                }
              })
          }
        })
        .catch(() => { })
    },
    // 修改包管理
    modifyPackage (bagid) {
      this.userBagId = bagid
      this.modifyShow = true
    },
    cancel () {
      this.$emit('update:show', false)
    },
    getNewPData (data) {
      this.getsitetable()
    },
    getsitetable () {
      this.$axios.get('/userBag/getUserBagList?userId=' + this.id).then(res => {
        if (res.status === 200) {
          let result = res.data.result
          if (res.data.count > 0) {
            this.sitetable = result
          }
        }
      })
    }
  },
  filters: {
    setShowflag: value => {
      let text = ''
      switch (value) {
        case -1:
          text = '公共'
          break
        case 0:
          text = '私人不公开'
          break
        case 1:
          text = '私人公开'
          break
      }
      return text
    }
  },
  components: {
    addPackageDialog,
    modifyPackageDialog
  },
  mounted () {
    if (JSON.parse(localStorage.getItem('userlist'))) {
      this.id = JSON.parse(localStorage.getItem('userlist')).id
    }
    this.getsitetable()
  },
  watch: {
    show () {
      this.visible = this.show
    }
  }
}
</script>

<style scoped>
.addmanage {
  width: 80%;
  margin: auto;
  height: 40px;
  border: rgb(207, 232, 240) 1px dashed;
}
.addmanage button {
  margin-left: 45%;
  line-height: 20px;
}
</style>
